<template>
    <div :id="chartId" :style="{
          height: chartHeight + 'vh',
          width: chartWidth + 'vw'
        }"></div>
</template>

<script setup>
    import * as echarts from 'echarts'
    import {defineProps, watch, nextTick, ref} from 'vue'
    let props = defineProps({
        customForm: {
            type: Object,
        },
        chartId: {
            type: String,
        },
        chartHeight: {
            type: String,
            default: '25',
        },
        chartWidth: {
            type: String,
            default: '85',
        },
        fullScreen: {
            type: Boolean,
            default: false,
        },
    });

    watch(() => props.customForm, () => {
        nextTick(() => {
            initChart()
        })
    },{immediate: true})

    watch(() => props.fullScreen, () => {
        nextTick(() => {
            initChart()
        })
    },{immediate: true})

    let colorList = ['#165DFF','#1ED921','#2ec7c9','#b6a2de','#95706d','#ffb980','#d87a80',
        '#8d98b3','#e5cf0d','#97b552','#5ab1ef','#dc69aa',
        '#07a2a4','#9a7fd1','#588dd5','#f5994e','#c05050',
        '#59678c','#c9ab00','#7eb00a','#6f5553','#c14089']

    const legendList = ref([])
    const initChart =() => {
        var chartId = echarts.init(document.getElementById(props.chartId))
        chartId.clear()
        let xData = props.customForm.xData
        let listMap = props.customForm.yData
        let yUnit = props.customForm.yUnit
        let seriesData = series_data(listMap)
        var option = {
            tooltip: {
                trigger: 'axis',
                confine :true,
                enterable :true,//鼠标可以移入tooltip里
            },
            legend: {
                bottom:0,
                itemWidth: 0,
                itemHeight: 10,
                data: legendList.value
            },
            grid:{
                left:5,
                right:10,
                top:20,
                bottom:25,
                containLabel: true
            },
            xAxis: {
                type: 'category',
                boundaryGap : false,
                data: xData
            },
            yAxis: {
                type: 'value',
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: '#EDEDED', // 修改分割线的颜色为红色
                        type: 'solid' // 线条类型，默认为实线
                    }
                },
                axisLabel: {
                    formatter: function(value,index){
                        return value + yUnit;
                    }
                }
            },
            series: seriesData
        }
        chartId.hideLoading()
        chartId.setOption(option,true)
        nextTick(() => {
            chartId.resize();
        })
    }

    const series_data =(listMap) => {
        legendList.value = []
        var series = [];
        var i = 0;
        for(var name in listMap){  //根据后端传来的数据metricMap的长度循环创建serie里面的data[]，这里取的名字是item
            legendList.value.push(name)
            var item = {
                name:name,
                type:'line',
                symbol:'circle',
                symbolSize: 5, // 标记的大小，这里统一设置为10
                connectNulls:true,
                itemStyle : {
                    normal: {
                        color: colorList[i], //改变折线点的颜色
                        lineStyle: {
                            color: colorList[i] //改变折线颜色
                        }
                    }
                },
                data:listMap[name],
            }
            series.push(item)
            i++
        }
        return series
    }
</script>

<style scoped>

</style>